<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>首页</title>
    <link rel="stylesheet" href="style/css/common.css?v=0.13" />
    <link rel="stylesheet" href="style/css/home.css?v=0.17" />
    <link rel="stylesheet" href="style/css/modal.css?v=0.17" />

    <script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>

    <div id='home' class="home">
        <div class="blank-1"></div>
        <div class="sigete">
            <img src="images/sigete.png" alt="" />
        </div>
        <div class="fansuo">
            <img src="images/fansuo.png" alt="" />
        </div>
        <div id='xitong' class="xitong">
            <img src="images/xitong.png" alt="" />
        </div>

        <div id="vin" class="vin">
            <input id='vin-text' type="text" placeholder="17位VIN码(车架号)" value="" />
            <a id='vin-button' class="button"  onclick="vin_search()" ></a>
            <!--<div class="field">-->

            <!--</div>-->
            <!--<div id='vin-button' class="button">-->

            <!--</div>-->
        </div>
        <script>


            function vin_search(){

                var vin = $('#vin-text').val();
                vin = vin.replace(/^(\s+)|(\s+)$/,'');
                if( vin.length == 17 ){
                    location.href='/frontend/detail.html?vin=' + vin;
                }else{
                    alert('请输入正确VIN码！');
                }
            }

            (function(){
                $('#vin-text').keydown(function(event){
                    if(event.keyCode==13){
                        vin_search();
                    }
                });
            })();

        </script>

        <script>
            function bg_reset(){
                var height = document.documentElement.clientHeight;
                console.log( height );
                var home = document.getElementById('home');
                home.style.height = height + 'px';

                var vin = document.getElementById('vin');
                var page_width =document.getElementsByTagName('body')[0].clientWidth;
                console.log( page_width );
                var height = Math.min( page_width * 12.5 / 100, 81 );
                vin.style.height = height  + 'px';

                var input = document.getElementById('vin-text');
                input.style.width = Math.min( page_width * 36 / 100 ,230 ) + 'px';
                input.style.height = Math.min(26.12, page_width * 4 / 100 ) + 'px';
                input.style.marginLeft = Math.min(83.85, page_width * 13 / 100 ) + 'px';
                input.style.marginTop = Math.min(25.8, page_width * 4 / 100 ) + 'px';

                var input = document.getElementById('vin-button');
                input.style.width = Math.min( page_width * 10 / 100 ,230 ) + 'px';
                input.style.height = Math.min(26.12, page_width * 4 / 100 ) + 'px';
                input.style.marginLeft = Math.min(400, page_width * 63 / 100 ) + 'px';
                input.style.marginTop = Math.min(25.8, page_width * 3.8 / 100 ) + 'px';

                // 宽度大于500的情况下，防止输入码和高级查询过于靠下
                if( page_width > 500 ){

                    var xitong_clsname = document.getElementById('xitong').className;
                    if( xitong_clsname.indexOf('big_500') == -1 ){
                        document.getElementById('xitong').className+= ' big_500';
                    }
                    var vin_clsname = document.getElementById('vin').className;
                    if( vin_clsname.indexOf('big_500') == -1 ){
                        document.getElementById('vin').className+= ' big_500';
                    }
                }else{
                    var xitong_clsname = document.getElementById('xitong').className;
                    document.getElementById('xitong').className = xitong_clsname.replace(' big_500','');
                    var vin_clsname = document.getElementById('vin').className;
                    document.getElementById('vin').className = vin_clsname.replace(' big_500','');
                }
            }
            bg_reset();
//            window.onresize = function(){
//                bg_reset();
//            };
        </script>
        <div class="other-search" style="margin-top:0">
            ↓您还可以通过车型查询↓
        </div>
        <div class="search">
            <a href="search.html" class="button">
                <img src="images/search_button.png" alt="" />
            </a>
        </div>

        <div class="shuoming">
            <!--  --><p>
                本软件仅供参考使用，如遇查询信息不符 <br/>
                请及时致电：400-686-7677
            </p>
        </div>
    </div>





    <div class="modal modal-no-buttons"
         style="font-size: 1.1rem; text-align: left; top: 5rem; opacity: 1; width: 25rem; margin-left: -12.4rem; display: block;">
        <div class="modal-inner" style="border-radius: 0;">
            <div class="modal-title"><b>VIN码查询系统使用注意事项</b></div>
            <div class="modal-text">
                <div>1.解码查询后，车型、年款、排量、挡位、变速箱类型等信息，与已知信息有不符合者，请致电核实。</div>
                <div>2.用油指导与已知信息不符者，请致电核实。</div>
                <div>3.本查询系统所查询数据为人工整理而来，不排除部分出错的可能，查询结果仅供参考！如出现不符，请致电核实，并将出错信息发回客服，我们将尽快完善数据系统！</div>
                <div>4.核实用油信息，以拍摄变速箱照片确认为最佳！</div>
                <div>5.本数据仅供查询参考使用，我公司不负任何法律及实际的赔偿责任，如未与我公司核实，查询用油出错所造成的损失，我公司不予承担！</div>
                <div>6.本VIN查询数据仅供选油参考使用，不作为任何纠纷及法律裁定的判断依据。</div>
                <div>7.如有疑问请咨询格斯特润滑油工程师。</div>
            </div>
        </div>
        <div class="modal-buttons" style="display: block;">
            <span class="modal-button modal-button-bold" onclick="close_pop();">同意并继续查询</span>
        </div>
    </div>
<div class="mask" style="position: absolute; z-index:10; width: 100%; height: 100%; opacity: 0.5; top:0; left: 0;background-color: #000"></div>
    <script>
        function close_pop(){
            $('.modal').hide();
            $('.mask').hide();
        }

    </script>
</body>
</html>